<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
    <div class="container">
       <div class="jzz">
           <h6>全国>天气预报</h6>
           <p><input id="ibt" type="text" placeholder="请输入要查询的城市天气"></p>
           <div class="ld">
               <a href="">今天</a>
               <a href="" class="on">7天</a>
               <a href="">8-15天</a>
               <a href="">40天</a>
               <a href="">雷达图</a>
           </div>
       </div>
        <div> <span id="now"></span></div>
        <div>
            <div id="list"></div>
        </div>
        <p></p>
          <div class="ld-1">
              <ul>
                  <li class="del sx">
                      <h6>(今天)</h6>
                      城市:<span class="cs"></span>
                      <p>天气:<p class="tq"></p></p>
                      <p>风向: <span class="fx-1"></span></p>
                      <p><img src="img/m-1.png" alt=""></p>
                      <p><img src="img/m-2.png" alt=""></p>
                  </li>
                  <li>
                      <h6>20日</h6>
                      城市:<span class="cs-1"></span>
                      <p>天气:</p>
                      <p class="tq"></p>
                     <p> 风向: <span class="fx-1"></span></p>
                      <p><img src="img/m-3.png" alt=""></p>
                      <p><img src="img/m-4.png" alt=""></p>
                  </li>
                  <li class="del">
                      <h6>21日</h6>
                      城市:<span class="cs-2"></span>
                      <p>天气:</p>
                      <p class="tq"></p>
                      <p>风向: <span class="fx-1"></span></p>
                      <p><img src="img/m-1.png" alt=""></p>
                      <p><img src="img/m-5.png" alt=""></p>
                  </li>
                  <li>
                      <h6>22日</h6>
                      城市:<span class="cs-3"></span>
                      <p>天气:</p>
                      <p class="tq"></p>
                      <p>风向: <span class="fx-1"></span></p>
                      <p><img src="img/m-2.png" alt=""></p>
                      <p><img src="img/m-4.png" alt=""></p>

                  </li>
                  <li  class="del">
                      <h6>23日</h6>
                      城市:<span class="cs-4"></span>
                      <p>天气:</p>
                      <p class="tq"></p>
                      <p>风向: <span class="fx-1"></span></p>
                      <p><img src="img/m-4.png" alt=""></p>
                      <p><img src="img/m-5.png" alt=""></p>
                  </li>
                  <li>
                      <h6>24日</h6>
                      城市:<span class="cs-5"></span>
                      <p>天气:</p>
                      <p class="tq"></p>
                      <p>风向: <span class="fx-1"></span></p>
                      <p><img src="img/m-6.png" alt=""></p>
                      <p><img src="img/m-1.png" alt=""></p>
                  </li>
                  <li>
                      <h6>25日</h6>
                      城市:<span class="cs-6"></span>
                      <p>天气:</p>
                      <p class="tq"></p>
                      <p>风向:<span class="fx-1"></span></p>
                      <p><img src="img/m-1.png" alt=""></p>
                      <p><img src="img/m-4.png" alt=""></p>
                  </li>
              </ul>
          </div>

    </div>
</nav>
<main>
    <div class="container">
        <div class="bs qcfd">
            <ul>
                <li class="bs-1">
                    <p>紫外线指数</p>
                    <img src="img/l-1.png" alt="">
                    <div class="fd">
                        <span id="zwa"></span>
                    </div>
                </li>
                <li  class="bs-1">
                    <p>运动指数</p>
                    <img src="img/l-2.png" alt="">
                    <div class="fd">
                        <span id="kq"></span>
                    </div>
                </li>
                <li class="bs-1">
                    <p>健康.血糖指数</p>
                    <img src="img/l-3.png" alt="">
                    <div class="fd">
                        <span id="jk"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bs qcfd">
            <ul>
                <li class="bs-1">
                    <p>穿衣指数</p>
                    <img src="img/l-4.png" alt="">
                    <div class="fd">
                        <span class="drsg"></span>
                    </div>
                </li>
                <li class="bs-1">
                    <p>洗车指数</p>
                    <img src="img/l-5.png" alt="">
                    <div class="fd">
                        <span id="xc"></span>
                    </div>
                </li>
                <li class="bs-1">
                    <p>空气污染扩散指数</p>
                    <img src="img/l-6.png" alt="">
                    <div class="fd">
                        <span id="ks"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</main>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js.js"></script>
</body>
</html>